{% extends 'layouts/public.html' %}
{% load static i18n %}

{% block title %}{% trans "Notícias" %}{% endblock title %}

{% block content %}
<div class="container mt-5 mb-5">
  <h1 class="mb-4" style="color: var(--gold);">{% trans "Notícias Recentes" %}</h1>

  <div class="row">
    {% if latest_news_list %}
      {% for item in latest_news_list %}
        <div class="col-md-4 mb-4">
          <div class="card h-100 border-0" style="background-color: var(--bg-section); color: var(--light); box-shadow: 0 0 10px rgba(0,0,0,0.5);">
            
            {% if item.news.image %}
              <img class="card-img-top" src="{{ item.news.image.url }}" alt="{{ item.translation.title }}" style="object-fit: cover; height: 200px;">
            {% endif %}

            <div class="card-body d-flex flex-column">
              <h5 class="card-title mb-2" style="color: var(--gold);">{{ item.translation.title }}</h5>
              <p class="card-text flex-grow-1">{{ item.translation.summary }}</p>
              <p class="card-text mt-2">
                <small style="color: #aaa;">
                  {% trans "Autor" %}: {{ item.news.author.username }}<br>
                  {% trans "Publicado em" %}: {{ item.news.pub_date|date:"d/m/Y H:i" }}
                </small>
              </p>
              <a href="{% url 'public_news_detail' item.news.slug %}" class="custom-btn btn-outline-light mt-auto">{% trans "Leia mais" %}</a>
            </div>
          </div>
        </div>
      {% endfor %}
    {% else %}
      <div class="col-12">
        <p class="text-muted">{% trans "Não há notícias disponíveis no momento." %}</p>
      </div>
    {% endif %}
  </div>
</div>
{% endblock content %}
